import React, {PureComponent} from 'react';
import styles from './index.less';
import {Table, Alert, Badge, Switch, Icon,Button, InputNumber, Tooltip, Popconfirm}  from 'antd';
import constants from '../../../common/constants';
import {powerControl} from '../../../utils/powerControl';
const AuthButton = powerControl(Button);
class BrandList extends PureComponent {

    state = {
        selectedRowKeys: [],
        totalCallNo: 0,
    };
    componentWillReceiveProps(nextProps) {
        if (nextProps.selectedRows.length === 0) {
            this.setState({
                selectedRowKeys: [],
                totalCallNo: 0,
            });
        }
    }
    handleEditRow = (record, pagination) => {
        this.props.onEditRow(record, pagination);
    }

    handleTableChange = (pagination, filters, sorter) => {
        this.props.onChange(pagination, filters, sorter);
    }

    handleDelRow = (brand_id, pagination) => {
        this.props.onDelRow(brand_id, pagination);
    }

    handleRecommendRow = (record, pagination) => {
        this.props.onRecommendRow(record,pagination);
    }

    render(){

        const {selectedRowKeys, totalCallNo} = this.state;
        const {data: {list, pagination}, loading} = this.props;
        const status = ['待审核', '审核通过'];
        const columns = [
            {
                title: '品牌名称', dataIndex: 'brand_name',fixed: 'left',
                render: (val, record) => {
                    return <Tooltip placement="right" title={record.brand_name}>
                        <span>{val}</span>
                    </Tooltip>
                }
            },
            {
                title: '品牌字母', dataIndex: 'brand_letter',
                render: (val, record) => {
                    return <Tooltip placement="right" title={record.brand_letter}>
                        <span>{val}</span>
                    </Tooltip>
                }
            },
            {
                title: 'Logo图片', dataIndex: 'brand_logo',
                render: (val, record) => {
                    return <Tooltip placement="right" title={record.brand_logo}>
                        <img src={`${constants.imageUrlFix}${val}`} style={{width:50,height:50}}/>
                        {/*<span>{val}</span>*/}
                    </Tooltip>
                }
            },
            {
                title: '品牌描述', dataIndex: 'brand_desc',
                render: (val, record) => {
                    return <Tooltip placement="right" title={record.brand_desc}>
                        <span>{val}</span>
                    </Tooltip>
                }
            },
            {
                title: '品牌网址', dataIndex: 'site_url',
                render: (val, record) => {
                    return <Tooltip placement="right" title={record.brand_desc}>
                        <a href={val}  target="_blank">{val}</a>
                        {/*<span>{val}</span>*/}
                    </Tooltip>
                }
            },
            {
                title: '排序', dataIndex: 'sort_order',
                render: (val) => (
                    <InputNumber min={1} max={100} defaultValue={val} value={val} size={3}/>
                )
            },

            {
                title: '页面显示', dataIndex: 'is_show',//是否在前台页面显示 1显示; 0不显示
                render(val) {
                    return <Switch checkedChildren={<Icon type="check"/>} unCheckedChildren={<Icon type="cross"/>}
                                   defaultChecked={val}/>;
                },
            },
            {
                title: '是否删除', dataIndex: 'is_delete',//是否删除 0否1是
                render(val) {
                    return <Switch checkedChildren={<Icon type="check"/>} unCheckedChildren={<Icon type="cross"/>}
                                   defaultChecked={val}
                                     checked={val}/>;
                },
            },

            {
                title: '审核状态',
                dataIndex: 'audit_status',//审核状态：0待审核，1审核通过
                filters: [
                    {
                        text: status[0],
                        value: "0"
                    },
                    {
                        text: status[1],
                        value: "1",
                    }
                ],
                filterMultiple: false,
                render(val, record) {
                    return <Switch checkedChildren={<Icon type="check"/>} unCheckedChildren={<Icon type="cross"/>}
                                   defaultChecked={val} checked={val}/>;
                },
            },
            {
                title: '添加人员', dataIndex: 'add_user_name',//添加人员
                render: (val, record) => {
                    return <Tooltip placement="right" title={record.add_user_id}>
                        <span>{val}</span>
                    </Tooltip>
                }
            },
            {
                title: '添加时间', dataIndex: 'add_time',//分类名称
                render: (val, record) => {
                    return <Tooltip placement="right" title={record.add_time}>
                        <span>{val}</span>
                    </Tooltip>
                }
            },
            {
                title: '审核人员', dataIndex: 'audit_user_name',//审核人员
                render: (val, record) => {
                    return <Tooltip placement="right" title={record.audit_user_id}>
                        <span>{val}</span>
                    </Tooltip>
                }
            },
            {
                title: '审核时间', dataIndex: 'audit_time',//分类名称
                render: (val, record) => {
                    return <Tooltip placement="right" title={record.audit_time}>
                        <span>{val}</span>
                    </Tooltip>
                }
            },
            {
                title: '操作',
                // fixed:'right',
                render: (val, record) => (
                    <p>
                        <AuthButton ghost className={styles.btn} size="small" auth="brand.edit" onClick={() => this.handleEditRow(record, pagination)}>编辑</AuthButton>
                        <span className={styles.splitLine}/>
                        <Popconfirm title="是否确定删除?" onConfirm={() => this.handleDelRow(record.brand_id, pagination)} >
                            <AuthButton ghost className={styles.btn} size="small" auth="brand.delete">删除</AuthButton>
                        </Popconfirm>
                        <span className={styles.splitLine}/>
                        <AuthButton ghost className={styles.btn} size="small" auth="brand.recommend " onClick={() => this.handleRecommendRow(record, pagination)}>推荐</AuthButton>
                    </p>
                ),
            },
        ];

        const rowSelection = {
            onChange: (selectedRowKeys, selectedRows) => {
                console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
            },
            onSelect: (record, selected, selectedRows) => {
                console.log(record, selected, selectedRows);
            },
            onSelectAll: (selected, selectedRows, changeRows) => {
                console.log(selected, selectedRows, changeRows);
            },
        };
        const paginationProps = {
            showSizeChanger: true,
            showQuickJumper: true,
            ...pagination,
        };
        return (
            <div className={styles.standardTable}>
                <Table
                    oading={loading}
                    rowKey={record => record.cat_id}
                    // rowSelection={rowSelection}
                    dataSource={list}
                    columns={columns}
                    pagination={paginationProps}
                    onChange={this.handleTableChange}
                    scroll={{x: 2800}}
                />
            </div>
        )

    }
}
export default BrandList;

